<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易播放器</title>
		<style>
		div{
			position: absolute;
			left: 50%;
			width: 400px;
			height: 400px;
			margin-left: -200px;
			top: 50%;
			margin-top: -200px;
			text-align: center;
		}
		video{

			width: 400px;
		}
		</style>
	</head>
	<body>
		<div >
			<video id="video" src="http://www.pzhuweb.cn/data/china.mp4" controls="controls"></video>
			<span id="node">当前时间/总时间</span>
			<button id="can">播放</button>
		</div>
		<script>
		var video=document.getElementById("video");
		var con=document.getElementById("can");
		video.addEventListener("loadeddata",init,false);
		con.addEventListener("click",videoPlay,false);
		video.addEventListener("timeupdate",updateTime,false);
		
		function init(){
				document.getElementById("node").innerHTML=asTime(video.currentTime)+"/"+asTime(video.duration);
		}
		
		function videoPlay(){
			if (video.paused) {
				video.play();
				con.innerHTML="暂停";
			} else{
				video.pause();
				con.innerHTML="播放";
			}
		}
		function updateTime(){
			document.getElementById("node").innerHTML=asTime(video.currentTime)+"/"+asTime(video.duration);
		}
		
		function asTime(t){
			t=Math.round(t);
			var min=Math.floor(t/60);
			var sec=t%60;
			if(min<10){
				min="0"+min;
			}
			if(sec<10){
				sec="0"+sec;
			}
			return min+":"+sec;
		}
		</script>
	</body>
</html>
